<template>
  <div class="prize panel animated" :type="prize.prizeType">
    <div class="dialog-panel">
      <ul class="content type-1" v-if="5==prize.prizeType">
        <li class="title">
          恭喜您获得
          <span>{{prize.prizeName}}</span>，请填写江西联通号码领取
        </li>
        <li>
          <label for>手机号</label>
          <input
            id="input"
            type="number"
            v-model="umobile"
            value="umobile"
            :disabled="Boolean(prize.status)"
            placeholder="点击这里输入手机号"
          >
        </li>
        <li class="infor">注：非江西联通手机号不能领取</li>
        <li
          class="prize-btn"
          :class="{'pointerEvents':isclick,'none':Boolean(prize.status)}"
          @click.passive.stop="receivePrizeFunc"
        ></li>
      </ul>
      <ul class="content type-2" v-else-if="2==prize.prizeType">
        <li class="title">恭喜您获得</li>
        <li class="title">
          <span>{{prize.prizeName}}</span>
        </li>
        <li
          class="prize-btn"
          :class="isclick?'pointerEvents':''"
          @click.passive.stop="aqiyiLink(prize.linkUrl)"
        ></li>
      </ul>
      <ul class="content" v-else-if="0==prize.prizeType">
        <li class="title">恭喜您获得</li>
        <li class="title">
          <span>{{prize.prizeName}}</span>
        </li>
        <li class="infor">注：流量将会直接下发到绑定的江西联通手机号上</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { iosInput, checkMobile } from '@/assets/lib/tool'

import { getPrize } from '@/axios/api'
export default {
  data() {
    return {
      type: 1,
      umobile: this.prize['chargesPhone'],
      isclick: false
    }
  },
  props: {
    prize: {
      type: Object,
      required: true
    }
  },
  watch: {
    type(val) {
      if (5 == val) {
        iosInput();
      }
    }
  },
  mounted() {
    iosInput();
  },
  methods: {
    receivePrizeFunc() {
      if (!checkMobile(this.umobile)) {
        layer.open({
          content: '请填写手机号',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        return;
      }
      this.isclick = true;
      getPrize({ p: this.umobile }).then(rs => {
        this.isclick = false;
        layer.open({
          content: rs.msg,
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        setTimeout(() => {
          location.reload()
        }, 1500)
      })
    },
    aqiyiLink(url) {
      location.href = url;
    }
  }
}
</script>
<style lang="less" scoped>
.none {
  display: none;
}
.prize {
  .dialog-panel {
    width: 588px;
    height: 592px;
    overflow: hidden;
    background: url("../assets/images/dialog-panel.png") no-repeat;
    background-size: 588px 592px;
    .content {
      .title {
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px;
        span {
          color: #fff220;
          font-size: 32px;
        }
      }
      input {
        padding: 10px;
        border-radius: 15px;
        background: #d70f28;
        color: #ffbbbb;
        width: 220px;
      }
      input::-webkit-input-placeholder {
        background: #d70f28;
        color: #ffbbbb;
      }
      .infor {
        text-align: center;
        margin-top: 10px;
        font-size: 18px;
        color: #ffbbbb;
      }
    }

    ul {
      margin: 90px 0;
      padding: 0 100px;
      width: 588px;
      height: 412px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      li {
        letter-spacing: 0.2em;
        line-height: 1.5em;
        font-weight: bold;
        color: #fff;
      }

      .prize-btn {
        margin-top: 50px;
        width: 404px;
        height: 78px;
        background: url("../assets/images/prize-btn.png") no-repeat center
          center;
        background-size: 90%;
      }
    }
  }
}
</style>
